【JS】设置、获取、删除标签属性以及H5自定义属性 | 您所在的位置:网站首页 › js 修改对象的属性名为 › 【JS】设置、获取、删除标签属性以及H5自定义属性 |
目录 1、设置标签属性 2、获取标签属性 3、删除标签属性 4. 判断是否包含指定的属性 5、HTML5自定义属性 1、设置标签属性使用setAttribute()('属性名', '属性值')方法可以添加、修改、删除属性。 下面的demo是为input添加、修改、删除value属性: HTML JS // 添加value属性 document.querySelectorAll('.input')[0].setAttribute('value', "add value's attribute"); // 修改value属性 document.querySelectorAll('.input')[1].setAttribute('value', "change value's attribute"); // 删除value属性值 document.querySelectorAll('.input')[3].setAttribute('value', "");注意:querySelectorAll 可以选择多个节点,以","分隔开,返回的是个数组; 2、获取标签属性使用 getAttribute(‘属性名')方法获取标签的属性 下面的demo是获取input的name属性 HTML JS const name = document.querySelectorAll('.input')[0].getAttribute('name'); console.log(name); // zhangdan 3、删除标签属性使用removeAttribute('属性名')方法删除标签的属性 下面的demo是删除input的name属性 HTML JS const name = document.querySelectorAll('.input')[0].removeAttribute('name'); console.log(name); // undefined 4. 判断是否包含指定的属性element.hasAttribute(“属性名”) 判断元素里面有没有对应的属性名 结果会返回布尔类型的值,true或false const target = document.getElementsByClassName('test')[0]; target.setAttribute('data-name', 'test'); console.log(target.hasAttribute('data-name')); // true target.removeAttribute('data-name'); console.log(target.hasAttribute('data-name')); // false 5、HTML5自定义属性 自定义属性的目的:是为了保存和使用数据,有些数据可以保存到页面中而不用保存到数据库中自定义属性获取是通过 getAttribute(‘属性’) 方法获取但是有些自定义属性很容易引起歧义,不容易判断到底是元素内部的属性还是自定义属性H5中新增了标准1.H5中规定自定义属性需要以 data- 开头做属性名并且赋值 或者 element.setAttribute('data-name','test');2. 获取H5自定义属性 兼容性较好的获取方法 getAttribute(‘属性’) H5新增方法(从IE11才开始支持,兼容性较差) element.dataset.属性; element.dataset[ ‘属性’ ]; dataset 可以理解成 集合 的意思,获得所有以 data-开头的 自定义属性,data-开头的自定义属性的集合 const target = document.getElementsByClassName('test')[0]; console.log(target.dataset); console.log(target.dataset.name); console.log(target.dataset.age);注意:使用dataset操作data 要比使用getAttribute速度稍微慢些,虽然使用dataset不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。 |
CopyRight 2018-2019 实验室设备网 版权所有 |